<template>
  <div id="chart" ref="chart"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';

const chart = ref(null);

onMounted(() => {
  const myChart = echarts.init(chart.value);

  myChart.setOption({
    dataset: {
      source: [
        ['score', 'amount', 'product'],
        [89.3, 58212, '未启动'],
        [57.1, 78254, '准备阶段'],
        [74.4, 41032, '非现场实施阶段'],
        [50.1, 12755, '现场实施阶段'],
        [89.7, 20145, '报告阶段'],
        [68.1, 79146, '结项阶段'],
        [19.6, 91852, '已关闭'],
        [10.6, 101852, '已归档'],
        [32.7, 20112, '已完成']
      ]
    },
    grid: { containLabel: true },
    xAxis: { name: 'amount' },
    yAxis: { type: 'category' },
    series: [
      {
        type: 'bar',
        encode: {
          x: 'amount',
          y: 'product'
        },
        itemStyle: {
          color: {
            type: 'linear',
            x: 1,
            y: 0,  // 这里的y=1让渐变从底部开始
            x2: 0,
            y2: 0,  // 这里的y2=0让渐变到顶部
            colorStops: [
              { offset: 1, color: '#FFF5E1' }, // 根部颜色：浅黄色
              { offset: 0, color: '#FFB347' }  // 顶部颜色：深橙色
            ]
          }
        }
      }
    ]
  });
});
</script>

<style>
#chart {
  width: 100%;
  height: 100%;
}
</style>
